<template>
	<EPopup
		@input="onChange"
		:value="value"
		@touchmove.stop.prevent="stopScrolling"
		:safeAreaInsetBottom="true"
		mode="bottom"
		:border-radius="24"
		:maskCloseAble="false"
	>
		<view class="dy-main">
			<view class="dy-main-title flex row-between col-center">
				{{ title }}
				<image src="/static/images/third/icon_tc_close@2x.png" @click.prevent.stop="onCancel" />
			</view>
			<view class="dy-main-content" v-if="listData.length">
				<scroll-view scroll-y class="scroll-view">
					<view class="flex account-item col-center" v-for="(item, index) in listData" :key="item.id">
						<view class="item-image"><image :src="item.dyPortrait || '/static/icon/icon_home_people.png'" /></view>
						<view class="item-content">
							<view class="agent-name line-1">{{ item.nickName || '用户姓名' }}</view>
							<view class="agent-num" v-if="item.channelAccount">抖音号：{{ item.channelAccount }}</view>
						</view>
						<view class="is-select" @click.prevent.stop="chooseAccount(item, index)">
							<view class="select-icon">
								<image v-if="!item.dyUrl" :src="needIconObject.disabled" />
								<image v-else :src="defaultIndex === index ? needIconObject.active : needIconObject.default" />
							</view>
						</view>
						<view class="not-bind flex col-center row-center" v-if="!item.dyUrl" @click.prevent.stop="toDyAccount">
							去完善信息
							<image src="/static/images/third/icon_tc_right.png" />
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="dy-main-footer">
				<button @click.prevent.stop="sureChoose">确认</button>
			</view>
		</view>
	</EPopup>
</template>

<script>
import EPopup from '@/components/EPopup/EPopup';
const needIconObject = Object.freeze({
	default: require('@/static/images/third/icon_xz_default@2x.png'),
	active: require('@/static/images/third/icon_xz_chosen@2x.png'),
	disabled: require('@/static/images/third/icon_xz_disable@2x.png')
});
export default {
	name: 'dyPopup',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '请选择抖音账户'
		},
		listData: {
			type: Array,
			default: () => []
		}
	},
	// computed: {
	// 	defaultIndex() {
	// 		let computeIndex = 0;
	// 		computeIndex = this.listData
	// 			.map((item, index) => {
	// 				if (item.isDefault) {
	// 					return index;
	// 				}
	// 			})
	// 			.filter((getIndex) => getIndex)[0];
	// 		console.log(computeIndex);
	// 		return computeIndex;
	// 	}
	// },
	watch: {
		listData(val) {
			if (val.length) {
				let computeIndex = 0;
				computeIndex = val
					.map((item, index) => {
						if (item.isDefault) {
							return index;
						}
					})
					.filter((getIndex) => getIndex)[0];
				console.log(computeIndex);
				this.defaultIndex = computeIndex;
			}
		}
	},
	components: {
		EPopup
	},
	data() {
		return {
			needIconObject,
			selectIndex: '',
			defaultIndex: 0
		};
	},
	methods: {
		onChange(e) {
			this.$emit('input', e);
		},
		onCancel() {
			this.$emit('input', false);
		},
		sureChoose() {
			this.onCancel();
			this.$emit('clickSure');
		},
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		},
		chooseAccount(item = {}, index) {
			console.log(item);
			const { dyUrl = '' } = item;
			if (!dyUrl) {
				uni.showToast({
					title: '信息未完善',
					icon: 'none'
				});
				return;
			}
			console.log(index);
			this.defaultIndex = index;
			console.log(this.defaultIndex);
			// console.log(index);
			// this.selectIndex = index;
			this.$emit('update:selectAccount', item);
		},
		toDyAccount() {
			const url = `/thirdManage/dyAccount`;

			this.$emit('input', false);
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';
.dy-main {
	height: 620rpx;
	background: #fbfbfb;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx 28rpx 20rpx;
	&-title {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		text-align: left;
		margin-bottom: 20rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	&-footer {
		margin-top: 20rpx;
		button {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 24rpx;
			background: #ff6b11;

			&::after {
				display: none;
			}
		}
	}
}
.dy-main-content {
	// 40rpx - 20rpx - 88rpx - 40rpx - 20rpx
	height: calc(100% - 188rpx);
	overflow-y: scroll;
	.account-item {
		padding: 24rpx 16rpx 20rpx;
		border-radius: 12px;
		background: #ffffff;
		margin-bottom: 20rpx;
		position: relative;

		.item-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 1;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-content {
			width: calc(100% - 161rpx);
			.agent-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 8rpx;
			}
			.agent-num {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.not-bind {
			position: absolute;
			right: 0;
			top: 0;
			background: #ff6b11;
			border-radius: 0px 12px 0px 12px;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			width: 180rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
		.is-select {
			width: 50rpx;
			.select-icon {
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				// border: 1px solid #cccccc;
				// background: #ffffff;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.select-icon-disabled {
				background: #eee;
			}
		}

		// .select-icon-active {
		// 	background: url(/static/images/third/icon_xz_chosen.png) 10% !important;
		// 	background-size: 100%;
		// 	border-color: #ff6b11 !important;
		// 	position: relative;
		// 	background-position: left;
		// }
		// .select-icon-disabled {
		// 	background: #eeeeee !important;
		// }
	}
}
.scroll-view {
	height: 100%;
}
</style>
